Muchos pensarán ¡pues no te registres en ningún sitio y punto! tienen toda la razón.
Muchos pensarán ¡pues no te registres en ningún sitio y punto! tienen toda la razón.
DryIcons » Iconos con buen gusto |
|
▼ |
En Xyberneticos descubro DryIcons allí encontraremos iconos originales y de muy buen gusto. Los paquetes de iconos los podemos descargar en formato .ico y .png y en diferentes tamaños 16×16, 24×24, 32×32, 48×48
S3Slider con jQuery |
|
▼ |
Antes de crear el Slideshow debo aclarar que hay scripts que suelen crear conflictos y aunque jQuery es una librería con efectos sensacionales puede que al añadirla no se obtengan los resultados esperados.
No digo con eso que jQuery sea el problema, puede ser cualquier otro scripts que tengamos, es por eso que todos los ejemplos que pongo sobre jQuery los añado en otro blog.
Para el ejemplo yo me incliné por el Slideshow que en la página del autor se muestra con la imagen grande podéis ver el ejemplo en este enlace.
Los primeros pasos a seguir que siempre recomiendo es preparar las imágenes que vamos a añadir, luego ya podemos descargar los archivos tranquilamente.
Descarga de archivos
Una vez los descargamos los alojamos en nuestro servidor (cuando digo "nuestro" servidor me refiero al que solemos usar para alojar archivos que Blogger no permite, y por supuesto un sitio donde poder alojar archivos .js)
Nos situamos en plantilla Edición de HTML y sin expandir buscamos </head> justo antes de añadimos los scripts de la siguiente forma.
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>
» En timeOut: 4000 podemos variar la velocidad para el efecto de la imagen.
Ayer comentaba sobre personalizar el scrosscol y dejé entrever que hoy el tema sería una bonita idea para incluir en él.
Esta era la idea, utilizar el crosscol para añadir un Slideshow, naturalmente no es la idea más maravillosa del mundo ni descubrí algo nuevo, pero el resultado es muy atractivo.
El siguiente paso es añadir el código html donde incluiremos las imágenes, lo haremos en un gadgets escogiendo HTML/Javascript ¿Y el lugar? eso depende donde vayamos a añadirlo, puede ser en cualquier sitio dependiendo del tamaño de las imágenes. En el ejemplo yo lo añadí en el espacio del famoso crosscol.
» Si queremos más de dos imágenes añadimos
» Iván tuvo la genial idea de aplicar un enlace a cada imagen si deseamos que así sea en lugar de
<img src="url-imagen" />
pondríamos:
Ya sólo queda el último paso, añadir los estilos y nos vamos a plantilla otra vez para situarnos justo antes de ]]></b:skin>
» En este último código modificaremos las medidas, en s3slider y s3sliderContent hay que añadir las mismas medidas que tienen nuestras imágenes.
» En width ponemos el ancho de nuestra imagen. Y en height será el alto.
» En "s3sliderImage span" nos encontramos con background-color: #000; eso será el color del cuadro de texto.
» Una línea antes, donde width: 720px; es el ancho que tendrá el cuadro de texto.
Personalizar el crosscol |
|
▼ |
Desde hace un tiempo las plantillas traen un elemento llamado crosscol, no es más que una continuación del header (cabecera del blog) un espacio que no es imprescindible porque podemos aumentar el número de maxwidgets del header y con ello añadir nuevos elementos aquí la forma de hacerlo.
Pero ocurre que el crosscol está ahí, y pensamos darle utilidad bien sea para añadir un menú, una galería de imágenes o cualquier otro contenido.
El crosscol se encuentra justo después de <div id='content-wrapper'>
y antes de <div id='main-wrapper'> si no lo tenemos y nos gustaría añadirlo ese es el sitio.
Una vez lo tenemos no permite añadir elementos si antes no se lo permitimos, la forma de hacerlo es sustituyendo
por <b:section class='crosscol' id='crosscol' showaddelement='yes'/>
En plantilla de diseño lo encontraríamos como la siguiente imagen.
La forma de personalizarlo depende mucho de la utilidad que deseamos darle, por ejemplo si deseamos que adquiera los mismos estilos que tenemos en la sidebar lo que haríamos sería copiar todos los estilos desde /* Sidebar Content ----*/ hasta /* Profile ---- */
Una vez copiado los pegamos a continuación y sustituimos el texto de sidebar por crosscol y le añadimos un poco de holgura al contenido con padding.
Guardamos los cambios y comprobamos el resultado añadiendo algún contenido en el crosscol, si no deseamos añadirle título es suficiente con omitir ese paso.
Personalizarlo de distinta forma a la sidebar también es posible bastaría con utilizar el mismo código cambiando o añadiendo otros estilos.
La personalización da mucho juego siempre digo lo mismo, la imaginación en lo que cuenta. Mañana os veo con una bonita utilidad para el crosscol.
Jugando con » CSS Sandbox |
|
▼ |
Color Jack » Completa herramienta online |
|
▼ |
Color Jack: Sphere es una herramienta de color muy especial, nos proporciona colores RGB, HSV, CMYK y una serie de opciones donde podemos visualizar los colores análogos, neutros, complementarios, fríos, armónicos etc...
No es una herramienta sencilla todo hay que decirlo pero si le dedicamos unos minutos descubriremos colores que difícilmente encontraríamos en cualquier paleta de colores.
Añadir, enlazar, configurar menús |
|
▼ |
Entre las consultas que recibo hay una que se repite constantemente, se trata de añadir un menú al blog y que enlace cualquier entrada o etiqueta.
Lo primero que haremos será buscar ese menú, hay muchas páginas donde hacerlo y seguro que ya tenéis alguno en mente.
Vamos a añadir un menú con CSS esto quiere decir que consta de los estilos y el código para los enlaces únicamente.
Para ejemplo añadí el que veis en la parte superior de la entrada.Los estilos los añadiremos justo antes de ]]></b:skin>
position: relative;
.red #slatenav ul li a.current {
En este menú tenemos dos imágenes:
La opacidad
El efecto hover
Para añadirlas estas o cualquier otra imagen nos fijaremos que el nombre de la imagen corresponda con el lugar donde tenemos que añadirla en los estilos del menú.
Es decir, guardamos o descargamos las imágenes a nuestro PC las subimos a nuestro servidor o a una entrada del blog que dejaremos en borrador y copiamos la url de la imagen para añadirla en el sitio que corresponda.
Podría ser que no contenga imágenes y que en lugar de decir background: transparent url(url-de-cualquier imagen);fuera un color en este caso sería algo así background:#ccc; o background-color:#ccc; eso nos daría la posibilidad de sustituir el color por cualquier otro.Ya tenemos el código de los estilos en la plantilla, las imágenes añadidas o el color de nuestro agrado.
Guardamos los cambios y nos situamos en plantilla de diseño, allí editamos un nuevo gadget y escogemos la pestaña de HTML...
En las páginas de menús también nos proporcionan el código HTML para los enlaces del menú, para este del ejemplo es el siguiente:
<div class="red">
<div id="slatenav">
<ul>
<li><a href="url-página" class="current" title="descripción">Home</a></li>
<li><a href="url-página" title="descripción">Enlace1</a></li>
<li><a href="url-página" title="descripción">Enlace2</a></li>
<li><a href="url-página" title="descripción">Enlace3</a></li>
</ul>
</div>
</div>
*Donde dice url-página añadimos la url de la página que vamos a enlazar.
*En descripción es el texto que se muestra al pasar el cursor sobre el enlace.
*El texto Home lo añadí para tener una página de inicio.
*Etiqueta1- 2- 3 serán el nombre de los enlaces, es decir el texto que visualizamos.
Completamos esos detalles y guardamos los cambios para no perderlos.Lo que haremos será visualizar la entrada completa. Podemos hacerlo de varias formas...
» Haciendo click en el título de la entrada.» Desde una confirmación de comentario en el correo.
» En el enlace de (x comentarios)
» En un título de los archivos.
» Desde un gadget de últimas entradas.
» El gadget de últimos comentarios.
Una vez visualizamos la entrada completa copiamos la url que aparece en la barra del navegador. Esa es la url de la entrada que pegaremos en el código del menú.
Esta vez haremos clikc sobre la etiqueta en concreto. Se mostrarán en este caso todas las entradas con una misma etiqueta o los títulos de las entradas con una misma etiqueta si así lo tenemos establecido.
Copiaremos la url de la barra del navegador y esa es la url de nuestra etiqueta que pegaremos en el código de nuestro menú.
» Enlazar el perfil de autor «En este caso nos dirigimos a nuestro perfil y realizamos la misma operación, copiar la url y pegar en el menú.
» Enlace a envío de correo «Aquí cambiamos porque vamos a enlazar con la dirección de nuestro correo.
Sería algo así:Enlazar una página externa sería más de lo mismo, copiar la url de la página y pegarla en nuestro código donde "a href"
Espero que esto conteste tus dudas "El blog gracioso"
¡Suerte!!
Efecto deslizante en los archivos de la sidebar |
|
▼ |
Guarda una copia de la plantilla para evitar problemas innecesarios.
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.1.0");
google.load("scriptaculous", "1.8.3");
</script>
Justo después añadimos:
3º Guardamos los cambios y nos situamos justo antes de ]]></b:skin> allí añadimos los estilos para los archivos.
.sidebar h2{
Luego nos situamos justo antes de </head> y allí añadimos lo siguiente:
Accessibility Color Wheel » Generador de color para texto y fondo |
|
▼ |
Cuando realizamos algún cambio a los colores de nuestro blog la tarea se puede hacer pesada e intermibable.
Con esta aplicación interactiva lo vamos a tener más fácil, nos permite comprobar el efecto de color en fondo, texto y contraste proporcionado el código y evitando con esto mil y una prueba antes de decidirnos.
Wallpapers » Anne Geddes |
|
▼ |
AdSense en Blogger |
|
▼ |
Simplifica la labor de añadir publicidad al blog y tienta bastante curiosear para descubrir qué hay detrás de esa información.
Pues bien, ya sé que hay detrás de esa invitación y es lo que veis en la imagen. La opción de escoger el lugar donde añadiríamos publicidad de AdSense.
Si hacemos click en la pestaña de "SIGUIENTE" nos muestra esta otra imagen y nos avisa que se ha activado una cuenta de AdSense para la cuenta de correo que estamos utilizando.
Nos podemos informar de lo que podemos ganar, la forma de pago y las políticas del programa de Google AdSense en los enlaces que proporciona.
Yo tengo curiosidad por saber que pensáis sobre la publicidad en el blog ¿La pondrías en tu blog? ¿Te molesta cuando visitas otros blogs? ¿Qué opinas sobre este tema?
Como la vida misma |
|
▼ |
Thumbizy capturas de pantalla |
|
▼ |
Conseguir la captura de una página no requiere dedicar demasiado tiempo ni utilizar programita alguno de imágenes, con Thumbizy podemos hacerlo en un abrir y cerrar de ojos y lo que es mejor podemos escoger añadir esquinas redondeadas, sombra, reflejo, visualizar la página completa o sólo lo que se contempla en pantalla.
Los tamaños pueden ser 100px, 180px, 250px y 360px.
De ilusión también se vive |
|
▼ |
Conforme nos vamos familiarizando con el blog vamos adquiriendo soltura y perdemos el miedo que inicialmente teníamos a tocar cualquier cosa que no fuera el editor de entradas.
Un día es un detalle en los títulos, al otro un borde en las imágenes, al otro... queremos probar aquello que vemos en tal o cual blog.
Existe una curiosidad sana y ansiedad por descubrir que se esconde detrás de ese detalle que nos enamora. Nuestro aliado el código fuente, se une a nosotros intentado darnos el empujón.
Las páginas de diseño son mi perdición, es acceder a una y a otra y a otra.... y pasar el tiempo sin apenas darse cuenta, hago mil pruebas en mis sufridos blogs y a veces me he sorprendido sonriendo por la ilusión que produce conseguir algo que ha llamado mi atención.
Lo más curioso de todo es que no tengo ni la más remota idea de trabajar con imágenes y por más que me hago el propósito de dedicar un tiempo a aprender ese tiempo no llega nunca.
Pero sigo ahí erre que erre con la ilusión intacta y la sensación después de haber perdido un tiempo sin finalidad alguna.
Esto es una muestra de lo que me trae de cabeza ¿quieren perderse entre páginas conmigo? visiten la nube de etiquetas de CSSArtillery
Wallpapers » Fondos de pantalla |
|
▼ |
Webwait tiempo de carga de nuestra web |
|
▼ |
Webwait es una herramienta para saber el tiempo que tarda en cargar completamente nuestra web, no hay que olvidar que el tema de la conexión es importante.
Resulta muy útil y puede ser que más de uno pensemos que ya es hora de optimizar nuestro sitio.
Para utilizarla es suficiente con ingresar la url y hacer click en Time it!
Resizeyourimage herramienta online para redimensionar imágenes |
|
▼ |
Resizeyourimage es una herramienta online que nos ofrece la posibilidad de recortar cualquier área de una imagen. Los formatos de imagen permitidos son jpg, gif, png y tiff ectc...
Posee un zoom para aumentar o disminuir la imagen así como la opción de rotar.
Con tres pasos es suficiente.
» Subir imagen.
» Ajustar tamaño.
» Guardar imagen.
Es tan útil como rápido y sencillo.
Blogger y los errores de Códigos bX |
|
▼ |
Si estáis registrados en Grupo de Ayuda Google podéis acceder sin ningún problema a este enlace donde Gerard (Guía de Google) nos proporciona unas pautas a seguir para intentar solucionar el problema. Resumo los pasos a seguir.
2. Error del servidor
3. Conflictos con la memoria caché o las cookies
4. Compatibilidad con el navegador
5. Cambios en la plantilla. Código HTML erróneo
6. Otros ;)
- Es importante asegurarse que el problema está en Blogger y no en nuestra PC.
2. Si pasan los días y el problema continúa intenta realizar la misma operación con otro navegador.
3. También puedes vaciar la memoria caché y limpiar las cookies.
4. Comprueba que no se trata de una plantilla mal codificada. Prueba con una plantilla original de Blogger para asegurarte que el problema no viene de la plantilla que deseas instalar.
De no encontrar un debate con el mismo problema abriremos un mensaje nuevo en el grupo Ayuda de Blogger con los siguientes detalles:
1. Código bX y uri que te salen en la pantalla del navegador.
2. Detalla en qué navegador te aparece el error.
3. Que estabas haciendo cuando sucedió el error. Qué haces para que vuelva a suceder
4. Desde cuando te pasa
5. Importante: En qué blog te sucede el error y ¿te pasa lo mismo en otro?
¡ Suerte!
Añadir estilos a una nueva sidebar |
|
▼ |
Hace tiempo añadíamos una segunda sidebar al blog, los resultados fueron buenos pero en varias ocasiones me han comentado la imposibilidad de personalizar la segunda sidebar de forma que el resultado fuera el mismo que en la primera.
El ejemplo que voy a poner ha sido realizado en una plantilla Minima, siguiendo los pasos indicados tiempo atrás he añadido una nueva sidebar.
Y añadí color de fondo a la sidebar.
Explico esto porque es posible conseguir que con los mismos estilos que tenemos para una sidebar la personalización resulte la misma para las dos, eso es posible si en section class añadimos el mismo nombre.
Lo que hacemos entonces es buscar y copiar lo siguiente:
y pegarlo justo después del código que copiamos.
Haremos unos cambios en este último, vamos a sustituir el texto de "sidebar" por "newsidebar"
Luego buscamos (sin expandir la plantilla) lo siguiente:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Y sustituimos sidebar por newsidebar
<div id='newsidebar-wrapper'>
<b:section class='newsidebar' id='newsidebar' preferred='yes'>
</b:section>
</div>
Ahora ya podemos trabajar en los estilos que copiamos y posteriormente pegamos y los cambios se mostrarán en la nueva sidebar.
Optimizar los titulos en Blogger |
|
▼ |
Optimizar los títulos aparentemente es algo que carece de importancia pero si la tiene.
Normalmente en los buscadores aparece primero el nombre del blog precedido del título de la entrada, si optimizamos los títulos el resultado será a la inversa, aparecerá en primer lugar el título de la entrada y después el del blog. ¿Y qué más da el orden?
Eso mismo me preguntaba yo, la respuesta es que si los títulos aparecen en primer lugar conseguimos un mejor posicionamiento porque parece ser que Google le da más importancia a las primeras palabras que se encuentran al inicio del título.
Supongamos que tengo una duda sobre el blog y busco en Google "Añadir sidebar" entre los muchos resultados encontraría "Gem@ BLOG añadir sidebar (Columna)" si Google le da más importancia a las primeras palabras debemos tener el título en primer lugar para que esa entrada tenga un buen posicionamiento o al menos intentar que lo tenga.
Nos dejamos la cháchara y pasamos a optimizar los títulos.
En nuestra plantilla localizamos <head> (al principio) justo después encontraremos algo así:
Lo que haremos será sustituirlo por:
Hay mucha información en Google sobre como optimizar los títulos, pero esta en concreto y mucha más en Vagabundia
SlideServer aloja y comparte PowerPoint |
|
▼ |
SlideServer es un sitio donde alojar y compartir presentaciones de PowerPoint al estilo de SlideShare.
Los formatos permitidos son .ppt .pps y .pot y no deben superar 50 MB.
Una vez subida la presentación podemos compartirla con el resto de usuarios o bien escoger que nuestro archivo sea público o privado, tiene sistema de votación y nos ofrece la posibilidad de añadirlo a nuestro blog mediante el código que nos provee, así como la url de su alojamiento.
Revolution Lifestyle |
|
▼ |
Wallpapers » 2topics |
|
▼ |